<template>
  <div style="padding: 10px;">
    <el-row >
      <el-col>
        <div style="display: flex;">
          <div>
            <el-form :model="list_params" ref="searchForm"  size="small" :inline="true">
              <el-form-item label="" label-width="80px" prop="searchValue">
                <el-input v-model="list_params.searchValue" placeholder="供货单/合同号" ></el-input>
              </el-form-item>
              <el-form-item label="国外代理" prop="agentId">
                <el-select filterable  v-model="list_params.agentId" placeholder="请选择国外代理" clearable  :style="{width: '100%'}">
                  <el-option label="全部" value=""></el-option>
                  <el-option v-for="item in agent_list" :label="item.name" :value="item.id" :key="item.id" ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="物流公司" prop="domesticMaterialFlowCompanyId">
                <el-select filterable  v-model="list_params.domesticMaterialFlowCompanyId" placeholder="请选择物流公司" clearable  :style="{width: '100%'}">
                  <el-option label="全部" value=""></el-option>
                  <el-option v-for="item in logistics_list" :label="item.name" :value="item.id" :key="item.id" ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="清关公司" prop="customsClearanceCompanyId">
                <el-select filterable  v-model="list_params.customsClearanceCompanyId" placeholder="请选择清关公司" clearable  :style="{width: '100%'}">
                  <el-option label="全部" value=""></el-option>
                  <el-option v-for="item in clearance_list" :label="item.name" :value="item.id" :key="item.id" ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button type="primary"  size="mini" @click="handleQuery">搜索</el-button>
                <el-button  size="mini" @click="resetQuery">重置</el-button>
              </el-form-item>
            </el-form>
          </div>
          <div style="flex: 1;"></div>
          <div>
            <el-button>删除</el-button>
            <el-button @click="handleEnable(0)" >禁用</el-button>
            <el-button @click="handleEnable(1)" >启用</el-button>
            <!-- <el-button @click="handleExport">导出</el-button>
            <el-button>导入</el-button> -->
            <el-button type="primary" @click="addInfo" >新增</el-button>
          </div>
        </div>
      </el-col>
      <el-col>
        <div style="margin-top: 10px;">
          <el-table :data="list_data" @selection-change="handleSelectionChange"  :height="table_height" style="width: 100%;" >
            <el-table-column type="selection" width="50" align="center"  />
            <el-table-column label="合同号" prop="cargoOwnerName" width="180">
              <template slot-scope="scope" >
                {{scope.row.supplyList.contractNumber}}
              </template>
            </el-table-column>
            <el-table-column label="货柜号" prop="cargoOwnerName" width="180">
              <template slot-scope="scope" >
                {{scope.row.supplyList.containerNumber}}
                </template>
            </el-table-column>
            <el-table-column label="货主" prop="cargoOwnerName" width="180">
                <template slot-scope="scope" >
                  {{scope.row.supplyList.cargoOwnerName}}
                  </template>
            </el-table-column>
            <el-table-column label="供货商品" prop="cargoOwnerName" width="180">
                <template slot-scope="scope" >
                  {{scope.row.supplyList.productNames}}
                  </template>
            </el-table-column>
            <el-table-column label="国外代理" prop="agentName" width="180"></el-table-column>
            <!--            <el-table-column label="总数量" prop="cargoOwnerName" width="180"></el-table-column>-->
            <el-table-column label="清关公司" prop="customsClearanceCompanyName" width="180"></el-table-column>
            <el-table-column label="配送市场" prop="marketName" width="180"></el-table-column>
            <el-table-column label="配送档口" prop="stallName" width="180"></el-table-column>
            <el-table-column label="国内运输公司" prop="domesticMaterialFlowCompanyName" width="180"></el-table-column>
            <el-table-column label="发车时间" prop="departTime" width="180"></el-table-column>
            <el-table-column label="到达市场时间" prop="arrivalTime" width="180"></el-table-column>
            <el-table-column label="车牌号" prop="licensePlateNumber" width="180"></el-table-column>
            <el-table-column label="司机姓名" prop="driverName" width="180"></el-table-column>
            <el-table-column label="司机电话" prop="driverPhone" width="180"></el-table-column>
            <el-table-column label="司机证件" prop="driverCertificate" width="180"></el-table-column>
            <el-table-column label="操作" prop="cargoOwnerName" width="180" fixed="right">
              <template slot-scope="scope" >
                <el-button
                  size="mini"
                  type="text"
                  @click="showInfo(scope.row)"
                >查看详情</el-button>
              </template>
            </el-table-column>
          </el-table>

          <pagination
            v-show="list_total>0"
            :total="list_total"
            :page.sync="list_params.pageNum"
            :limit.sync="list_params.pageSize"
            @pagination="getList"
          />
        </div>
      </el-col>
    </el-row>
    <el-drawer
      :title="formData.id?'编辑物流清单':'新增物流清单'"
      size="80%"
      :visible.sync="dialog_show">
      <el-form :model="formData" ref="form" :rules="formDataRules"  size="small" label-width="100px" >
        <div>
          <div class="section">
            <el-row>
              <el-col :span="6">
                <el-form-item label="供货单" prop="supplyListId">
                  <div v-if="formData.id">{{supply_order_info.contractNumber}}</div>
                  <el-select filterable  v-else  v-model="formData.supplyListId" style="width: 100%;" @change="onSupplyOrderChange">
                    <el-option v-for="item in supply_order_list" v-if="item.manageType != 3" :key="item.id" :value="item.id" :label="item.contractNumber +' - '+item.containerNumber +' - '+item.cargoOwnerName" ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="物流类型" prop="materialFlowType">
                  <div v-if="!supply_order_info.id">-</div>
                  <div v-else ><dict-tag :options="dict.type.material_flow_type" :value="supply_order_info.materialFlowType" /></div>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="国外代理" prop="agentId">
                  <el-select filterable  v-model="formData.agentId" placeholder="请选择国外代理" clearable  :style="{width: '100%'}">
                    <el-option v-for="item in agent_list" :key="item.id" :label="item.name" :value="item.id" ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="清关公司" prop="customsClearanceCompanyId">
                  <el-select filterable  v-model="formData.customsClearanceCompanyId" placeholder="请选择清关公司" clearable  :style="{width: '100%'}">
                    <el-option v-for="item in clearance_list" :key="item.id" :label="item.name" :value="item.id" ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col>
                <div>供货单信息</div>
              </el-col>
              <el-col>
                <div style="padding-top: 12px;">
                  <el-table :data="[supply_order_info]">
                    <el-table-column label="合同号" prop="contractNumber" ></el-table-column>
                    <el-table-column label="货柜号" prop="containerNumber" ></el-table-column>
                    <el-table-column label="货主" prop="cargoOwnerName" ></el-table-column>
                    <el-table-column label="供货产品" prop="productNames" ></el-table-column>
                    <el-table-column label="总数量" prop="totalQty" ></el-table-column>
                  </el-table>
                </div>
              </el-col>
            </el-row>
          </div>
          <div class="section">
            <el-row  gutter="20">
              <el-col :span="8">
                <el-form-item label="配送市场" prop="marketId">
                  <el-select filterable  v-model="formData.marketId" style="width: 100%;" @change="onMarketChange">
                    <el-option v-for="owner in market_list" :key="owner.id" :label="owner.name" :value="owner.id"  ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="配送档口" prop="stallId">
                  <el-select filterable  v-model="formData.stallId" style="width: 100%;">
                    <el-option v-for="owner in stall_list" :key="owner.id" :label="owner.name" :value="owner.id"  ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="国内运输公司" prop="domesticMaterialFlowCompanyId">
                  <el-select filterable  v-model="formData.domesticMaterialFlowCompanyId" style="width: 100%;">
                    <el-option v-for="item in logistics_list" :key="item.id" :label="item.name" :value="item.id" ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="发车时间" prop="departTime">
                  <el-date-picker v-model="formData.departTime" value-format="yyyy-MM-dd"  style="width: 100%;"></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="到达市场时间" prop="arrivalTime">
                  <el-date-picker v-model="formData.arrivalTime" value-format="yyyy-MM-dd"  style="width: 100%;"></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="车牌号" prop="licensePlateNumber">
                  <el-input v-model="formData.licensePlateNumber"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="司机姓名" prop="driverName">
                  <el-input v-model="formData.driverName"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="司机电话" prop="driverPhone">
                  <el-input v-model="formData.driverPhone"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="司机证件" prop="driverCertificate">
                  <el-input v-model="formData.driverCertificate"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="国内运费垫资方" prop="transportFeeCapital">
                  <el-radio-group v-model="formData.transportFeeCapital">
                    <el-radio :label="1">清关公司</el-radio>
                    <el-radio :label="2">档口代垫</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="国内运费报价" prop="feeQuotation">
                  <el-input v-model="formData.feeQuotation"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="国内运费成本" prop="feeCost">
                  <el-input v-model="formData.feeCost"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="国内运费付款日期" prop="feePaymentTime">
                  <el-date-picker v-model="formData.feePaymentTime" value-format="yyyy-MM-dd"  style="width: 100%;"></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="国内运费收款方" prop="feePayee">
                  <el-input v-model="formData.feePayee"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
          <div class="section">

            <el-row>
              <el-col :span="12">
                <div>
                  <div style="padding-bottom: 12px;">图片附件</div>
                  <div>

                    <el-form-item prop="pictures" label-width="0px" >
                      <el-upload ref="field101" :file-list="pictures" :action="uploadImgUrl" limit="10" multiple
                                 :headers="headers" :on-success="field101Success" :on-remove="field101Remove"
                                 :before-upload="field101BeforeUpload" list-type="picture-card" accept="image/*">
                        <i class="el-icon-plus"></i>
                      </el-upload>
                    </el-form-item>
                  </div>
                </div>
              </el-col>
              <el-col :span="12">
                <div>
                  <div style="padding-bottom: 12px;">文件附件</div>
                  <div>

                    <el-form-item prop="pictures" label-width="0px" >
                      <el-upload ref="field102" :file-list="files" :action="uploadImgUrl" limit="10" multiple
                                 :headers="headers" :on-success="field102Success" :on-remove="field102Remove"
                                 :before-upload="field101BeforeUpload"  >
                        <el-button size="small" type="primary">点击上传</el-button>
                      </el-upload>
                    </el-form-item>
                  </div>
                </div>
              </el-col>
            </el-row>

          </div>
          <div class="section" style="display: flex;justify-content: flex-end;position: sticky;bottom: 0px;">
            <el-button type="primary" @click="submitData">提交</el-button>
          </div>
        </div>
      </el-form>
    </el-drawer>
    <el-drawer
      title="物流清单详情"
      size="80%"
      :visible.sync="edit_dialog_show">
      <div>
        <div class="section">
          <el-row>
            <el-col :span="6">
              <div>
                <div class="section-item-title">供货单</div>
                <div>{{ supply_order_info.contractNumber }}</div>
              </div>
            </el-col>
            <el-col :span="6">
              <div>
                <div class="section-item-title">物流类型</div>
                <div ><dict-tag :options="dict.type.material_flow_type" :value="supply_order_info.materialFlowType" /></div>
              </div>
            </el-col>
            <el-col :span="6">
              <div>
                <div class="section-item-title">国外代理</div>
                <div>{{ info.agentName }}</div>
              </div>
            </el-col>
            <el-col :span="6">
              <div>
                <div class="section-item-title">国内清关公司</div>
                <div>{{ info.customsClearanceCompanyName }}</div>
              </div>
            </el-col>
            <el-col>
              <div style="padding-top: 20px;">供货单信息</div>
            </el-col>
            <el-col>
              <div style="padding-top: 12px;">
                <el-table :data="[supply_order_info]">
                  <el-table-column label="合同号" prop="contractNumber" ></el-table-column>
                  <el-table-column label="货柜号" prop="containerNumber" ></el-table-column>
                  <el-table-column label="货主" prop="cargoOwnerName" ></el-table-column>
                  <el-table-column label="供货产品" prop="productNames" ></el-table-column>
                  <el-table-column label="总数量" prop="totalQty" ></el-table-column>
                </el-table>
              </div>
            </el-col>
          </el-row>
        </div>
        <div class="section">
          <el-row :gutter="20">
            <el-col :span="4" class="section-item">
              <div class="section-item-title">配送市场</div>
              <div>{{info.marketName}}</div>
            </el-col>
            <el-col :span="4" class="section-item">
              <div class="section-item-title">配送档口</div>
              <div>{{info.stallName}}</div>
            </el-col>
            <el-col :span="4" class="section-item">
              <div class="section-item-title">国内运输公司</div>
              <div>{{info.domesticMaterialFlowCompanyName}}</div>
            </el-col>
            <!--            <el-col :span="4" class="section-item">-->
            <!--              <div class="section-item-title">派车公司</div>-->
            <!--              <div>某某派车公司</div>-->
            <!--            </el-col>-->
            <el-col :span="4" class="section-item">
              <div class="section-item-title">发车时间</div>
              <div>{{info.departTime}}</div>
            </el-col>
            <el-col :span="4" class="section-item">
              <div class="section-item-title">到达市场时间</div>
              <div>{{info.arrivalTime}}</div>
            </el-col>
            <el-col :span="4" class="section-item">
              <div class="section-item-title">车牌号</div>
              <div>{{ info.licensePlateNumber }}</div>
            </el-col>
            <el-col :span="4" class="section-item">
              <div class="section-item-title">司机姓名</div>
              <div>{{info.driverName}}</div>
            </el-col>
            <el-col :span="4" class="section-item">
              <div class="section-item-title">司机电话</div>
              <div>{{ info.driverPhone }}</div>
            </el-col>
            <el-col :span="4" class="section-item">
              <div class="section-item-title">司机证件</div>
              <div>{{info.driverCertificate}}</div>
            </el-col>
            <el-col :span="4" class="section-item">
              <div class="section-item-title">国内运费垫资方</div>
              <div>{{info.transportFeeCapital == 1?'清关公司':'档口代垫'}}</div>
            </el-col>
            <el-col :span="4" class="section-item">
              <div class="section-item-title">国内运费报价</div>
              <div>{{info.feeQuotation}}</div>
            </el-col>
            <el-col :span="4" class="section-item bg-green">
              <div class="section-item-title">国内运费成本</div>
              <div>{{info.feeCost}}</div>
            </el-col>
            <el-col :span="4" class="section-item">
              <div class="section-item-title">国内运费付款时间	</div>
              <div>{{info.feePaymentTime}}</div>
            </el-col>
            <el-col :span="4" class="section-item">
              <div class="section-item-title">国内运费收款方	</div>
              <div>{{info.feePayee}}</div>
            </el-col>
          </el-row>
        </div>

        <div class="section">
          <el-row>
            <el-col :span="12">
              <div>图片附件</div>
              <div>
                <el-row :gutter="10">
                  <el-col v-for="item in imgs" :span="4" >
                    <el-image
                      style="width: 100%; height: 100px;"
                      :src="item.url"
                      :preview-src-list="imgs.map(img => img.url)"
                    >        </el-image>
                  </el-col>
                </el-row>
              </div>
            </el-col>
            <el-col :span="12">
              <div>文件附件</div>
              <div>
                <div v-for="item in docs" style="background: #F3F4F6;padding: 16px;border-radius: 16px;margin: 10px 0px;display: flex;">
                  <div style="flex: 1;">
                    {{item.name}}
                  </div>
                  <div style="margin: 0px 10px;cursor: pointer;" @click="openNav(item.url)" ><i class="el-icon-view"></i></div>
                  <div style="margin: 0px 10px;cursor: pointer;" @click="openNav(item.url)"  ><i class="el-icon-download"></i></div>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
        <div class="section" style="display: flex;justify-content: flex-end;position: sticky;width: 100%;bottom: 0px;margin: 0px;">
          <el-button type="primary" @click="editInfo">编辑</el-button>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import { list,add,detail,update } from '@/api/logistics/domestic'
import {list as subjectList} from '@/api/base/subject'
import { list as supplyOrderList, detail as supplyOrderDetail } from '@/api/supply/order'
import {list as portList} from "@/api/base/port";
import {list as agentList } from "@/api/base/agent";
import { list as feeList } from "@/api/fee/fee";
import { list as marketList } from "@/api/base/market";
import { list as stallList } from "@/api/base/stall";
import {list as clearanceList} from '@/api/base/clearance'
import {list as clearanceOrderList} from '@/api/clearance/order'
import {list as logisticsList} from "@/api/base/carriage";
import { getToken } from '@/utils/auth'
import { getUploadFiles, getUploadFileUrls } from '@/api/common'
export default {
  name: 'sea_transportation',
  dicts:['supply_list_status','currency','material_flow_type'],
  data() {
    return {
      uploadImgUrl: process.env.VUE_APP_BASE_API + "/common/file/upload", // 上传的图片服务器地址
      headers: {
        Authorization: "Bearer " + getToken(),
      },
      pictures:[],
      files:[],
      table_height:window.innerHeight - 300,
      supply_order_list:[],
      list_params: {
        pageNum: 1,
        pageSize: 10,
        name: ''
      },
      list_total:0,
      list_data:[],
      info:{},
      dialog_show : false,
      edit_dialog_show : false,
      fees:[{ financeSubjectId:'' }],
      formData:{
      },
      formDataRules:{
        supplyListId: [{ required: true, message: '请选择供货单', trigger: 'change' }],
        agentId: [{ required: true, message: '请选择国外代理', trigger: 'change' }],
        customsClearanceCompanyId: [{ required: true, message: '请选择国内清关公司', trigger: 'change' }],
        marketId: [{ required: true, message: '请选择配送市场', trigger: 'change' }],
        stallId: [{ required: true, message: '请选择配送档口', trigger: 'change' }],
        domesticMaterialFlowCompanyId: [{ required: true, message: '请选择国内运输公司', trigger: 'change' }],
      },
      port_list:[],
      supply_order_info:{},
      agent_list:[],
      market_list:[],
      stall_list:[],
      clearance_list:[],
      logistics_list:[],
    }
  },
  created() {
    this.getSubjectList()
    this.getList()
    this.getPortList()
    this.getAgentList()
    this.getMarketList()
    this.getStallList()
    this.getClearanceList()
    this.getLogisticsList()
  },
  methods: {
    getLogisticsList(){
      logisticsList({is_page:0}).then(res => {
        this.logistics_list = res.rows;
      })
    },
    getClearanceList(){
      clearanceList({is_page:0}).then(res => {
        this.clearance_list = res.rows;
      })
    },
    getStallList(id){
      stallList({marketId:id,is_page:0}).then(res => {
        this.stall_list = res.rows;
      })
    },
    getMarketList() {
      marketList({is_page:0}).then(res=>{
        this.market_list = res.rows;
      })
    },
    getAgentList(){
      agentList({is_page:0}).then(res => {
        this.agent_list = res.rows;
      })
    },
    getPortList(){
      portList({is_page:0}).then(res => {
        this.port_list = res.rows;
      })
    },
    getSupplyOrderList(){
      this.supply_order_list = [];
      supplyOrderList({
        supplyListStatus:8,is_page:0
      }).then(res => {
        this.supply_order_list = res.rows;
      })
    },
    getList() {
      list(this.list_params).then(res => {
        this.list_data = res.rows;
        this.list_total = res.total
      })
    },
    getSubjectList(){
      subjectList({is_page:0}).then(res => {
        console.log(res)
        this.fees =  res.rows;
      })
    },
    handleQuery() {
      console.log('查询')
      this.list_params.pageNum = 1
      this.getList()
    },
    resetQuery(){
      this.list_params = {
        pageNum: 1,
        pageSize: 10,
      }
      this.getList()
    },
    showInfo(info){
      this.info = {}
      this.supply_order_info = {}
      this.fees = []
      detail(info.id).then(res=>{
        this.info = res.data
        supplyOrderDetail(res.data.supplyListId).then(res1 => {
          this.supply_order_info = {
            ...res1.data
          }
        })
        feeList({supplyListId:res.data.supplyListId,bizType:1}).then(res2 => {
          this.fees = res2.rows;
        })

        let imgs = res.data.imgFiles;
        let docs = res.data.docFiles;
        console.log(imgs)
        if (imgs != ''){
          getUploadFiles(imgs).then((img_res)=>{
            this.imgs = getUploadFileUrls(img_res.data);
            this.pictures = this.imgs;
          })
        }
        if (docs != ''){
          getUploadFiles(docs).then((img_res)=>{
            this.docs = getUploadFileUrls(img_res.data);
            this.files = this.docs;
          })
        }
      })
      this.edit_dialog_show = true
    },
    addInfo(){
      this.getSupplyOrderList()
      this.formData = {}
      this.supply_order_info = {}
      this.dialog_show = true
    },
    editInfo(){
      this.getSupplyOrderList()
      this.edit_dialog_show = false;
      this.formData = {
        ...this.info
      }
      this.dialog_show = true;
    },
    onSupplyOrderChange(){
      supplyOrderDetail(this.formData.supplyListId).then(res => {
        this.supply_order_info = {
          ...res.data
        }
        clearanceOrderList({supplyListId:this.formData.supplyListId}).then(res_clear=>{
          if(res_clear.rows.length != 0){
            let row = res_clear.rows[0];
            console.log(row)
            this.$set(this.formData,'agentId',row.agentId)
            this.$set(this.formData,'customsClearanceCompanyId',row.customsClearanceCompanyId)

          }
        })
      })
    },
    submitData(){
      this.$refs['form'].validate((valid) => {
        if (valid) {
          // this.handleConfirm()
          this.formData = {
            ...this.formData,
          }
          if (this.formData.id){
            update(this.formData).then(res => {
              this.$message.success('编辑成功')
              this.dialog_show = false
              this.getList()
            })
          }
          else{

            add(this.formData).then(res => {
              this.$message.success('添加成功')
              this.dialog_show = false
              this.getList()
            })
          }
        } else {
          return false;
        }
      });
    },
    onMarketChange(id){
      this.getStallList(id)
      this.formData = {
        ...this.formData,
        stallId:''
      }
    },
    field101BeforeUpload(file) {
      const postfix= file.name.substring(file.name.lastIndexOf('.')+1)
      if(!this.fileSuffix.includes(postfix)){
        this.$message.error('文件类型仅支持'+this.fileSuffix);
        return false
      }
      console.log(postfix)
    },
    field101Success(e){
      console.log('field101Success')
      console.log(e)
      let imgFiles = this.formData.imgFiles?this.formData.imgFiles:'';
      console.log(imgFiles)
      let imgs = imgFiles == ''?[]:imgFiles.split(',');
      imgs.push(e.data.id)
      this.formData = {
        ...this.formData,
        imgFiles:imgs.join(',')
      }
      console.log(this.formData)
    },
    field101Remove(file, fileList){
      let ids = []
      fileList.forEach((item)=>{
        if (item.id){
          ids.push(item.id);
        }else{
          ids.push(item.response.data.id)
        }
      })
      this.formData = {
        ...this.formData,
        imgFiles:ids.join(','),
      }
    },
    field102BeforeUpload(file) {
    },
    field102Success(e){
      console.log(e)
      let docFiles = this.formData.docFiles?this.formData.docFiles:'';
      let docs = docFiles == ''?[]:docFiles.split(',');
      docs.push(e.data.id)
      this.formData = {
        ...this.formData,
        docFiles:docs.join(',')
      }
    },
    field102Remove(file, fileList){
      let ids = []
      fileList.forEach((item)=>{
        if (item.id){
          ids.push(item.id);
        }else{
          ids.push(item.response.data.id)
        }
      })
      this.formData = {
        ...this.formData,
        docFiles:ids.join(','),
      }
    },
    openNav(url){
      window.open(url)
    }
  }
}
</script>

<style scoped>

</style>

<style scoped>
.section{
  background: #fff;
  padding: 24px;
  margin: 20px;
  border-radius: 8px;
}
.section-item{
  margin: 10px 0px;
  height: 52px;
}
.section-item-title{
  padding-bottom: 10px;
  font-size: 14px;
}
</style>

<style>

.el-drawer__body{
  background: #F3F4F6;
}
.select-custom-icon .el-input__suffix {
  display: none; /* 隐藏默认的下拉箭头 */
}
.select-custom-icon .el-input__suffix::after {
  content: url('../../../assets/icons/more.png'); /* 替换为您的自定义图标路径 */
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
}
.popper-class{
  display: none;
}
.bg-green{
  background: #13CE66;
}
</style>
